<!--  -->
<template>
  <a-modal :maskClosable="false" :destroyOnClose="true" :footer="null" centered :width="700" v-model="visible">
    <div class="disFlxCC">
      <a-icon class="_mt-20" type="check-circle" theme="filled" style="font-size: 50px; color: #40a9ff" />
      <div class="fz-18 fw-6 _mt-20">{{ title }}</div>
      <div v-if="desc" class="_mt-20">{{ desc }}</div>
      <div v-if="steps.length" class="_mt-30">
        <div class="disFlxAC _pt-5 _pb-5" v-for="(step, index) in steps" :key="index">
          <div class="step">{{ index + 1 }}</div>
          <div class="_ml-10 fw-6">{{ step }}</div>
        </div>
      </div>
      <div class="_mt-50 _mb-20">
        <a-button @click="close">{{ closeText }}</a-button>
        <a-button v-if="confirmText" class="_ml-20" type="primary" @click="confirm">{{ confirmText }}</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    desc: {
      type: String,
    },
    steps: {
      type: Array,
      default: () => [],
    },
    close: {
      type: Function,
    },
    confirm: {
      type: Function,
    },
    closeText: {
      type: String,
      default: '返回列表',
    },
    confirmText: {
      type: String,
    },
  },
  components: {},
  data() {
    return {
      visible: false,
    }
  },
  computed: {},
  watch: {},
  methods: {
    showModal() {
      this.visible = true
    },
    closeModal() {
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
.step {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  background-color: #40a9ff;
  color: #fff;
}
</style>